<template>
  <div class="page_goods" id="goods_list">
    <div class="warp">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-10">
            <div class="card_goods_list">
              <h4>商品列表</h4>
              <list_goods :list="list"></list_goods>
            </div>
          </div>
          <div class="col-12 col-md-2">
            <div class="card_list_hot">
              <h4>商品热门列表</h4>
              <list_goods_hot :list="list_hot"></list_goods_hot>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col overflow-auto flex_cc">
            <b-pagination-nav
              :base-url="$route.path"
              :number-of-pages="count_pages"
              :link-gen="link_gen"
              @change="change_page"
              first-number
              last-number
            ></b-pagination-nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "../../mixins/page.js";
import list_goods from "../../components/diy/list_goods.vue";
import list_goods_hot from "../../components/diy/list_goods_hot.vue";

export default {
  mixins: [mixin],
  components: {
    list_goods,
    list_goods_hot,
  },
  data() {
    return {
      url_get_list: "~/api/goods/get_list?",
      query: {
        page: 1,
        size: 8,
      },
      list_hot: [],
      // 页面数
      count_pages: 1,
    };
  },
  methods: {
    get_hot_goods() {
      this.$get(
        "~/api/goods/get_list",
        {
          page: 1,
          size: 5,
          orderby: "hits",
        },
        (res) => {
          if (res.result) {
            this.list_hot = res.result.list;
          }
        }
      );
    },
    get_list_after(json) {
      this.count_pages = Math.ceil(json.result.count / this.query.size);
    },
    link_gen(page_num) {
      return {
        query: {
          page: page_num,
        },
      };
    },
    change_page(page_num) {
      this.query.page = page_num;
      this.get_list();
    },
  },
  mounted() {
    this.get_hot_goods();
  },
};
</script>

<style scoped>
.flex_cc{
  display: flex;
  justify-content: center;
  align-items: center;
}
.card_goods_list {
  flex: 0 0 84%;
}
.card_goods_list h4 {
  font-size: 20px;
}
.card_list_hot {
  flex: 0 0 15%;
}
.card_list_hot h4 {
  font-size: 20px;
}
</style>
